<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="header">
            <span>总销售额</span>
            <i class="el-icon-warning item"></i>
          </div>
          <div class="total">¥ 126,560</div>
          <div class="trends">
            <span
              >周同比 12%
              <i class="el-icon-caret-top"></i>
            </span>
            <span
              >日环比 11%
              <i class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <div class="hr"></div>
          <div class="footer">
            <span>日均销售额</span>
            <span>￥12,423</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding-left: 10px">
        <el-card class="box-card">
          <div class="header">
            <span>访问量</span>
            <i class="el-icon-warning item"></i>
          </div>
          <!-- 雷达图 -->
          <Leida />

          <div class="hr"></div>
          <div class="footer">
            <span>日访问量</span>
            <span>1,234</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
        <el-card class="box-card">
          <div class="header">
            <span>支付笔数</span>
            <i class="el-icon-warning item"></i>
          </div>
          <!-- 饼图 -->
          <div class="chart">
            <Bintu />
          </div>
          <div class="hr"></div>
          <div class="footer">
            <span>转化率</span>
            <span>1,234</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="header">
            <span>运营活动效果</span>
            <i class="el-icon-warning item"></i>
          </div>
          <!-- 柱状图 -->
          <zhutu />
          <div class="hr"></div>
          <div class="trends">
            <span
              >周同比 12%
              <i class="el-icon-caret-top"></i>
            </span>
            <span
              >日环比 11%
              <i class="el-icon-caret-bottom"></i>
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-card class="sales-card">
        <div class="header">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            size="small"
            @change="changeFn"
          >
          </el-date-picker>
        </div>
        <el-tabs>
          <el-tab-pane label="销售额">
            <el-row style="margin-left: -10px; margin-right: -10px">
              <el-col :span="16">
                <div class="chart">
                  <!-- 折线图 -->
                  <zhexian ref="zhexian" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="table">
                  <h4 style="margin-bottom: 15px">门店销售额排名</h4>
                  <ul>
                    <li>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular">1</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular">2</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular">3</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">4</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">5</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">6</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">7</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">8</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="访问量">
            <el-row style="margin-left: -10px; margin-right: -10px">
              <el-col :span="16">
                <div class="chart">
                  <!-- 折线图 -->
                  <ZheXian />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="table">
                  <h4 style="margin-bottom: 15px">门店销售额排名</h4>
                  <ul>
                    <li>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular">1</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular">2</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular">3</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">4</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">5</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">6</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">7</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">
                          <div class="circular light">8</div>
                        </el-col>
                        <el-col :span="16">工专路 1 号店</el-col>
                        <el-col :span="5">323,234</el-col>
                      </el-row>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row></el-tab-pane
          >
        </el-tabs>
      </el-card>
    </el-row>
    <br />
    <el-row style="margin-left: -10px; margin-right: -10px">
      <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
        <el-card class="hots">
          <div class="header">
            <span>线上热门搜索</span>
            <el-dropdown class="ops">
              <span class="el-dropdown-link">
                ...<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>菜单一</el-dropdown-item>
                <el-dropdown-item>菜单二</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-table :data="tableData" height="280" style="width: 100%">
            <el-table-column type="index" width="80" label=" ">
            </el-table-column>
            <el-table-column
              prop="name"
              label="关键词"
              width="180"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="number"
              label="人数"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column prop="value" label="周增长率" align="center">
              <template slot-scope="{ row }"> {{ row.value }}% </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" style="margin-top: 8px">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1000"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
        <el-card class="hots">
          <div class="header">
            <span>销售额类别占比</span>
            <el-dropdown class="ops">
              <span class="el-dropdown-link">
                ...<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>菜单一</el-dropdown-item>
                <el-dropdown-item>菜单二</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div style="padding: 20px">
            <el-radio-group v-model="radio2" size="mini">
              <el-radio-button label="全渠道"></el-radio-button>
              <el-radio-button
                label="直达"
                @click="radio2 = '直达'"
              ></el-radio-button>
              <el-radio-button
                label="百度"
                @click="radio2 = '百度'"
              ></el-radio-button>
              <el-radio-button
                label="谷歌"
                @click="radio2 = '谷歌'"
              ></el-radio-button>
              <el-radio-button
                label="必应"
                @click="radio2 = '必应'"
              ></el-radio-button>
              <el-radio-button
                label="其他"
                @click="radio2 = '其他'"
              ></el-radio-button>
            </el-radio-group>
            <div class="chart">
              <Bin v-if="radio2 === '全渠道'" />
              <Pie v-if="radio2 === '直达'" />
              <Pie v-if="radio2 === '百度'" />
              <Pie v-if="radio2 === '谷歌'" />
              <Pie v-if="radio2 === '必应'" />
              <Pie v-if="radio2 === '其他'" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <br />
    <el-card class="hots">
      <div class="chart">
        <Zhu />
      </div>
    </el-card>
  </div>
</template>

<script>
import Leida from "./components/leida.vue";
import Bintu from "./components/bintu.vue";
import zhutu from "./components/zhutu.vue";
import zhexian from "@/views/dashboard/components/zhexian";
import Bin from "./components/Bin.vue";
import Zhu from "./components/Zhu.vue";
import ZheXian from "./components/Zhexians.vue";
import axios from "axios";
import Pie from "./components/pie.vue";
export default {
  name: "Index",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      radio2: "全渠道",
      tableData: [],
    };
  },
  components: {
    Leida,
    Bintu,
    zhutu,
    zhexian,
    Bin,
    Zhu,
    ZheXian,
    Pie,
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios({
        url: "http://localhost:8080/heima/search",
      })
        .then(({ data }) => {
          // console.log(data);
          this.tableData = data.data;
          //console.log(this.tableData);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    changeFn() {
      this.$refs.zhexian.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 16px;
  }
}
.box-card .header {
  height: 25px;
}
::v-deep .box-card .header span {
  color: #97a8be;
  font-size: 14px;
}
::v-deep .box-card .header .item {
  color: #97a8be;
  float: right;
  padding: 3px 0;
}
.box-card {
  padding: 5px 10px;
}
::v-deep .el-card__body {
  padding: 5px 20px;
  min-height: 210px;
}
// .el-card__body {
//   padding: 7px 20px;
// }
.box-card .total {
  font-size: 30px;
  height: 140px;
  line-height: 140px;
  padding-left: 20px;
}
.box-card .trends {
  height: 22px;
  font-size: 14px;
}
.box-card .trends span:last-child {
  margin-left: 20px;
  display: inline;
}
.box-card .footer span {
  font-size: 14px;
  line-height: 22px;
}
.box-card .footer span:last-child {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.85);
}
.box-card .trends span i {
  color: red;
}
.box-card .trends span:last-child i {
  color: green;
}
.box-card .hr {
  border-top: 1px solid #e8e8e8;
  margin: 0 0 10px 0;
}
.box-card .trends span {
  display: inline;
}
.box-card .chart {
  height: 160px;
}
// 搜索
.sales-card .header {
  position: absolute;
  right: 20px;
  top: 8px;
  z-index: 1;
}
//折线图区域
.sales-card .chart {
  height: 300px;
}
.sales-card .table {
  color: rgba(0, 0, 0, 0.65);
}
.sales-card .table h4 {
  color: #000;
  font-weight: 500;
}
.sales-card .table ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sales-card .table .circular {
  width: 20px;
  height: 20px;
  background-color: #314659;
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  border-radius: 50%;
}
.hots {
  height: 400px;
  position: relative;
}
.hots .header {
  color: #97a8be;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}
.hots .header .ops {
  position: absolute;
  right: 20px;
}
.el-table__body {
  height: 225px;
}
.hots .chart {
  height: 300px;
}
::v-deep .sales-card .table ul .el-row {
  margin-bottom: 10px !important;
}
.sales-card .table .light {
  background-color: #f5f5f5;
  color: rgba(0, 0, 0, 0.65);
}
</style>
